<template>
	<el-container>
		<el-aside width="180px">
			<el-row class="log">
				<el-col :span="24" class="log-icon">
					<span class="icon">vJ</span>
				</el-col>
				<el-col :span="24" class="log-title">
					微简通用企业管理
				</el-col>
			</el-row>
			<el-collapse v-model="activeName" accordion>

				<template v-for="item in menuData">
					<el-collapse-item v-for="(_item, _index) in item" :key="'parent'+_index">
						<template slot="title">
							<i class="header-icon el-icon-setting _title"></i>
							<span class="spn-title">{{_item.title}}</span>
						</template>
						<ul class="menu">
							<li v-for="(__item, __index) in _item.menu" :key="'child'+__index"
								@click="clk(__index,__item)">
								<i :class="__item.cls"></i>{{ __item.tip }}
							</li>
						</ul>
					</el-collapse-item>
				</template>

			</el-collapse>
		</el-aside>
		<el-container>
			<el-header style="height: 50px;line-height: 50px;">
				<ul class="nav">
					<li v-for="(item,index) in arrNav" :key="index" @click="nav(index,item)"
						:class="{focus:activeNav == index }">
						{{item}}
					</li>
				</ul>
				<div class="user">
					<a href="#">{{userData.OrgName}}</a>
					<a href="#"><img src="../../assets/user0.png" /></a>
					<el-dropdown>
						<span class="el-dropdown-link">
							{{userData.UserName}}<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item><a href="#" @click="drawer = true">风格设置</a></el-dropdown-item>
							<el-dropdown-item><a href="#" @click="exit()">退出</a></el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</el-header>
			<el-main>
				<router-view></router-view>
			</el-main>
			<el-footer>
				Copyright 2014-2024 微简科技. All rights reserved 京ICP备14038514号-1
			</el-footer>
		</el-container>
		<el-drawer title="风格设置" size="520px" :visible.sync="drawer">
			<el-row class="theme">
				<el-col :span="24">
					<a href="#" v-for="(item,index) in themeImg" :key="index">
						<img :src="item.url" />
						<div>{{item.tip}}</div>
					</a>
				</el-col>
			</el-row>
		</el-drawer>
	</el-container>
</template>
<script>
	import pub from "../../pubData.js";
	export default {
		data() {
			return {
				active: 0,
				activeNav: 10,
				drawer: false,
				activeName: '1',
				userData: JSON.parse(localStorage.getItem("userLoginData")),
				themeImg: [],
				menuData: pub.data,
				arrNav: pub.nav
			}
		},
		mounted: function() {
			let obj = null;
			let _arrTip = pub.theme
			for (let i = 1; i <= 24; i++) {
				let url = require("../../assets/theme/bootstrap" + i + ".jpg");
				obj = {
					url: url,
					tip: _arrTip[i - 1]
				}
				this.themeImg.push(obj);
			}
			console.log(pub.data[0])
		},
		methods: {
			clk(i, item) {
				this.active = i;
				this.$router.push(item.url)
			},
			nav(i) {
				this.activeNav = i;
			},
			exit() {
				this.$confirm('真的要退出本系统吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					window.localStorage.removeItem("userLoginData");
					window.localStorage.removeItem("token");
					window.localStorage.removeItem("dictionariesData");
					this.$router.push("/")
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		}
	}
</script>
<style>
	.log {
		text-align: center;
	}

	.log .log-icon {
		padding: 15px 0 10px 0;
	}

	.log .log-icon .icon {
		border: solid 2px #409EFF;
		display: inline-block;
		border-radius: 8px;
		font-size: 32px;
		font-family: fantasy, serif;
		width: 35px;
		padding: 5px;
		text-align: center;
		line-height: 35px;
		background-color: #409EFF99;
		height: 35px;
		font-weight: 700;
	}

	.log .log-title {
		font-size: 16px;
		padding-bottom: 10px;
	}

	.el-aside {
		color: #fff;
		background-color: #333744;
		display: block;
		position: relative;
		height: 100vh;
	}

	.el-aside .header-icon {
		margin-left: 15px;
	}

	.el-aside .spn-title {
		margin-left: 3px;
	}

	.el-aside .menu {
		list-style-type: none;
	}

	.el-aside .menu li {
		padding: 15px 0 15px 35px;
		color: #E9E9E9;
		cursor: pointer;
		border-left: solid 3px #1a1c23;
	}

	.el-aside .menu li:hover {
		color: #fff;
	}

	.el-aside .menu .focus {
		background-color: #409eff;
		border-left: solid 3px #a8d4ff;
		color: #fff;
	}

	.el-collapse-item__wrap,
	.el-collapse-item__header {
		background-color: #333744;
		color: #fff;
		border-bottom: none;
	}

	.el-collapse-item__header:hover {
		background-color: #1a1c23;
	}

	.el-collapse-item__content {
		background-color: #1a1c23;
		border: none;
		color: #fff;
		padding-bottom: 0
	}

	.el-header {
		display: flex;
		border-bottom: solid 1px #E9E9E9;
		justify-content: space-between;
	}

	.el-header .nav {
		display: flex;
		justify-content: space-around;
	}

	.el-header .nav .focus {
		background-color: #409eff;
		color: #fff;
	}

	.el-header .nav a,
	.nav li,
	.user a {
		display: inline-block;
		padding: 0 16px;
		text-align: center;
		color: #666
	}

	.el-header .nav a:hover,
	.nav li:hover,
	.user a:hover {
		padding: 0 16px;
		background-color: #D3EBFE;
		color: #409eff;
		cursor: pointer;
	}

	.el-header .user {
		display: flex;
	}

	.el-header .user img {
		width: 18px;
		height: 18px;
	}

	.el-main {
		background-color: #F0F2F5;
	}

	.el-footer {
		background-color: #F0F2F5;
		text-align: center;
	}

	.theme {
		padding: 0 0 0 20px;
	}

	.theme a {
		margin: 10px 20px 0 0;
		width: 85px;
		display: inline-block;
	}

	.theme a img {
		width: 100%;
		border-radius: 4px;
	}

	.theme a {
		border-radius: 8px;
		border: solid 4px #ccc;
	}

	.theme a div {
		text-align: center;
		font-size: 12px;
		margin: 3px 0;
	}

	.theme a:hover {
		border-radius: 8px;
		border: solid 4px #409eff;
	}
</style>
